import React, { Component } from 'react';
import {
  WhiteSpace,
  Flex,
  List,
  Button,
  Icon,
  Grid,
  Modal,
} from 'antd-mobile';
import { connect } from 'dva';
import GoodsCarousel from './goodsCarousel';
import MyScroll from '../../components/MyScroll/MyScroll';
import { routerRedux } from 'dva/router';
import StoreInfo from './StoreInfo';
import TimeBuy from './timeBuy';
import SecKill from './secKill';
import Group from './group';
import GroupList from './groupList';
import {wxShare} from "../../utils/weixinShare";
//  import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
// import pathToRegexp from 'path-to-regexp';

import CartBar from './CartBar';
import GoodsMoreInfo from './GoodsMoreInfo';
import GoodsList from './GoodsList';
import ButtonGoodsInfo from './ButtonGoodsInfo';
import SpecAll from './SpecAll';
import EvaluateGoodsList from './EvaluateGoodsList';
import GoodsTitle from './GoodsTitle';
import btn1 from '../../assets/svg/btn1.svg';
import btn2 from '../../assets/svg/btn2.svg';
import ActivityList from './activityList';
import { IMAGE_DOMAIN,isWechat,GetQueryString } from '../../utils/common';
import { goods_detail, divNone } from './goodsDetail.less';
import {tishi} from "../find/findIndex.less";


class GoodsDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal1: GetQueryString("show")==1?true:false,
      modal: false,
      vsible: false,
      buyType: 1,
      isShowAll: false,
        group:4
    };
      this.alloyTouch=null;
      this.oldData = "";
  }

    getAlloyTouch = (target) => {
        this.alloyTouch=target;
        // target.to(0);
    }

    componentWillMount() {
        // console.log("触发 componentWillMount。。。。。。。。。。。。。。。。。。。。。");
        // console.log(this.props.match.params.specId, "this.props.match.params");
        this.oldData = this.props.match.params.specId;
        this.props.dispatch({type: "goodsDetail/clearSpecId"});
    }

    componentWillUnmount() {
      if(this.props.goodsDetail.goodsDetailInfo.id) this.props.dispatch({type: "goodsDetail/emptyEFF", obj: {goodsId: this.props.goodsDetail.goodsDetailInfo.id}});
    }
    open = (is, buyType,group) => {
        console.warn(buyType,group);
        this.setState({vsible: is, buyType,group});
    }
    showModal = (e) => {
        this.setState({
            modal: true,
        });
    };
    onClose = () => {
        this.setState({
            modal: false,
        });
    };
    setShowAll = () => this.setState({isShowAll: true});
  render() {
      if (this.oldData != this.props.match.params.specId) this.alloyTouch.to(0);
    const { goodsDetail, location, dispatch } = this.props;
     const { goodsDetailInfo, buyCount, couponList = [] ,newGroupList,smallGroupDetailList={}} = goodsDetail;
     const { modal1, vsible, buyType ,group} = this.state;
     const {
       id,specId="", callyList  = [], name = '', salenum=0, cityName = "",
       spec = {}, shopActivityList = [], commentnum = 0, evaluate, praiseRate , show = 1,
       transfeeCharge = '', evaluateGoodsList=[], consultationNum=0,
       storeId="", storeLabel = '', storeName="", evaluateNum, storeGoodsNum, storeTrendsNum, storeDescription, evaluateStore,
       recommendList=[], orderList=[],
         bottomGoodsInfo, isFav, cartCount,
         specName, speAll, image
     } = goodsDetailInfo;
     const { specGoodsPrice, specGoodsSpec = {} } = spec;


      console.log(this.props.goodsDetail,smallGroupDetailList)

    return (
    <Flex style={{
        height:"100%",
        position:'relative',
    }} direction="column"
    >

      <GoodsTitle specId={specId} id={id} alloyTouch={ this.alloyTouch }  showModal={this.showModal} dispatch={dispatch} location={location}></GoodsTitle>
      <MyScroll
          getAlloyTouch={ this.getAlloyTouch }
          goodsDetailGoTo={ true }
          goTo={() => {
              console.warn('触发goTo。。。。。。。。。。。。。。。。。。。。。。。。。。');
              this.props.dispatch(routerRedux.replace(`/detail/${specId}`));
          } }
      >
        <div className={goods_detail}>
          <GoodsCarousel smallGroupDetailList={smallGroupDetailList} callyList={callyList} newGroupList={newGroupList} goodsDetailInfo={goodsDetailInfo}></GoodsCarousel>
            {goodsDetailInfo.activityType  ==60?<TimeBuy goodsDetailInfo={goodsDetailInfo}></TimeBuy>:""}
            {goodsDetailInfo.activityType  ==100?<SecKill goodsDetailInfo={goodsDetailInfo}></SecKill>:""}
            {goodsDetailInfo.activityType  ==110?<Group goodsDetailInfo={goodsDetailInfo}></Group>:""}
          <div className="goods_info">
             <div className="name text-two-eli">{ name }</div>
              {
                  goodsDetailInfo.activityType  !=0&&goodsDetailInfo.nowTime-goodsDetailInfo.startTime>0?"":
                      <div className="price">￥{ goodsDetailInfo.storePrice }</div>
              }
             <Flex className="salenum" justify="between">
               <div>运费：{ transfeeCharge == 1 ? '卖家承担运费' : '买家承担运费' }</div>
               <div>累计售出{salenum}笔</div>
               <div>{cityName}</div>
             </Flex>
          </div>

          {
              show == 1 ?
                  <div>
                    {/* <ActivityList shopActivityList={shopActivityList}></ActivityList> */}

                    {
                        shopActivityList[0] && <ActivityList shopActivityList={shopActivityList}></ActivityList>
                    }

                    <Flex className={ +goodsDetail.couponNum ? "goods_info" : divNone } justify="between" onClick={() => dispatch(routerRedux.push(`/goodsDetailCoupon/${storeId}`))}>
                      <div style={{ color:'#666' }}>领券猛戳这里</div>
                      <Icon
                          style={{ width:'.3rem',height:'.3rem', verticalAlign:"middle" }}
                          type="right"
                      />
                    </Flex>

                    <SpecAll  smallGroupDetailList={smallGroupDetailList} setShowAll={this.setShowAll} goodsDetailInfo={goodsDetailInfo} isShowAll={this.state.isShowAll}  buyType={buyType} group={group} dispatch={dispatch} image={image} buyCount={buyCount} spec={spec} specName={specName} speAll={speAll} open={this.open} goodsId={id} vsible={vsible} ></SpecAll>
                  </div>
                  :
                  <div style={{ width:"100%", height:'2rem', lineHeight:"2rem", backgroundColor:'#eee', textAlign:'center' }}>
                    此商品已经下架了
                  </div>
          }

            {goodsDetailInfo.activityType  ==110?<GroupList ref="groupList" open={this.open} smallGroupDetailList={smallGroupDetailList} goodsDetailInfo={goodsDetailInfo}></GroupList>:""}
          <EvaluateGoodsList
              evaluateGoodsList={evaluateGoodsList || []}
              commentnum={commentnum}
              evaluate={evaluate}
              praiseRate={praiseRate}
              dispatch={dispatch}
              id={id}
              specId={specId}
              consultationNum ={consultationNum } >
          </EvaluateGoodsList>

          <StoreInfo
              dispatch={dispatch}
              storeId={storeId}
              storeLabel={storeLabel}
              storeName ={storeName }
              storeDescription={storeDescription}
              evaluateNum ={evaluateNum }
              storeGoodsNum ={storeGoodsNum }
              storeTrendsNum={storeTrendsNum}
              evaluateStore={evaluateStore}
          >
          </StoreInfo>

          <GoodsList storeId={storeId} dispatch={dispatch} orderList ={orderList} recommendList={recommendList} />
          {/* <GoodsList storeId={storeId} dispatch={dispatch} orderList ={orderList} recommendList={this.props.orderList.list} /> */}

          <GoodsMoreInfo goodsDetailInfo={goodsDetailInfo} />

          {/* 底部商品信息暂时没有 */}
          {/* <ButtonGoodsInfo bottomGoodsInfo={bottomGoodsInfo}></ButtonGoodsInfo> */}

          <div style={{ height:'1rem' }}></div>


        </div>


      </MyScroll>
        <Modal
            popup
            visible={this.state.modal}
            onClose={this.onClose}
            // animationType="slide-down"
            className={tishi}
            maskClosable={true}
            transparent={true}
        >
            <Flex justify="end" style={{width:"100%"}}>
                <Icon type={btn2.id} style={{width:"4rem",height:"3rem",position:"relative",bottom:".5rem"}}></Icon>
            </Flex>
            <Flex justify="center" style={{width:"100%",marginTop:"3.5rem"}}>
                <Icon type={btn1.id} style={{width:"3rem",height:"3rem"}} onClick={this.onClose}></Icon>
            </Flex>
        </Modal>
      <CartBar disabled={show == 1 ? false : true} goodsDetailInfo={goodsDetailInfo} open={(is, type,group) => {this.open(is, type,group); this.setState({isShowAll: false})}} spec={{...spec, }} storeId={storeId} goodsId={id} dispatch={dispatch} cartCount={this.props.goodsDetail.cartCount || cartCount} isFav={isFav} />
    </Flex>

    );
  }
}

export default connect(({ goodsDetail, orderList, rank }) => ({ goodsDetail, orderList, rank }))(GoodsDetail);
